<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="styles1.css">
</head>

<body>
    <div class="login-container">
        <h1>欢迎登录你的GitCode账号</h1>
        <div class="login-tabs">
            <span class="tab active" data-tab="sms-login">短信登录</span>
            <span class="tab" data-tab="password-login">密码登录</span>
        </div>
        <div id="sms-login" class="login-content active">
            <div class="phone-code-selector">
                <select id="country-code">
                    <option value="+86">+86</option>
                </select>
                <input type="text" placeholder="请填写手机号">
            </div>
            <input type="text" placeholder="请填写手机验证码">
            <button id="get-code">获取验证码</button>
            <button id="sms-login-btn">登录</button>
        </div>
        <div id="password-login" class="login-content">
            <input type="text" placeholder="请输入用户名">
            <input type="password" placeholder="请输入密码">
            <button id="password-login-btn">登录</button>
        </div>
        <div class="other-actions">
            <a href="#">注册新账号</a>
            <span>--- 其他登录方式 ---</span>
            <div class="social-logins">
                <button class="social-login"><img src="github-icon.png" alt="GitHub">GitHub</button>
                <button class="social-login"><img src="google-icon.png" alt="Google">Google</button>
                <button class="social-login"><img src="wechat-icon.png" alt="WeChat">WeChat</button>
                <button class="social-login"><img src="qq-icon.png" alt="QQ">QQ</button>
            </div>
        </div>
        <p class="agreement">登录或注册完成代表你同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a></p>
    </div>

    <script src="script1.js"></script>
</body>

</html>